<template>
	<el-dialog
		title="菜单按钮权限"
		:visible.sync="menuButtonsVisible"
		:close-on-click-modal="false"
		width="40%"
		:before-close="beforeClose"
		append-to-body
	>
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:toolbar-config="toolbarConfig"
			:edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
		>
			<template #toolbar_buttons>
				<!-- <el-input
					v-model="query"
					placeholder="请输入"
					size="small"
					style="width: 200px"
					clearable
					@keyup.enter.native="handlerSearch"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="handlerSearch"
					/>
				</el-input> -->
				<el-button type="primary" size="small" @click="handlerAddButton">
					新增
				</el-button>
				<el-button type="success" size="small" @click="handlerSave">
					保存
				</el-button>
				<el-button size="small" @click="$table.revertData()"> 重置 </el-button>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
				<el-button type="text" size="small" @click="handlerDelRow(row)">
					删除
				</el-button>
			</template>
		</shyt-table>
	</el-dialog>
</template>

<script>
export default {
	props: {
		menuButtonsVisible: {
			type: Boolean,
			default: false,
		},
		parentMenu: {
			type: Object,
			default: () => {
				return {}
			},
		},
		curButtons: {
			type: Array,
			default: () => {
				return []
			},
		},
	},
	data() {
		return {
			// tableData: [],
			columns: [
				{
					title: '按钮名称',
					field: 'menuName',
					editRender: { name: 'ElInput' },
				},
				{
					title: '按钮编码',
					field: 'menuHref',
					editRender: { name: 'ElInput' },
				},
				{
					title: '操作',
					width: '100',
					slots: { default: 'edit' },
				},
			],
			$table: null,
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
		}
	},
	computed: {
		tableData() {
			return this.curButtons
		},
	},
	watch: {
		menuButtonsVisible: {
			handler: function (val) {
				if (val) {
					this.$nextTick(() => {
						this.$table = this.$refs.shytTable.$refs.xTable
					})
				}
			},
			immediate: true,
		},
	},
	mounted() {},
	methods: {
		beforeClose() {
			this.$emit('update:menuButtonsVisible', false)
			if (this.parentMenu.meta) {
				this.$emit('update:parentMenu', {})
			}
		},
		handlerEditRow(row) {
			this.$table.setActiveRow(row)
		},
		handlerDelRow(row) {
			this.$table.remove(row)
		},
		handlerAddButton() {
			this.$table.insert({ menuName: '', menuHref: '' })
		},
		handlerSave() {
			const { insertRecords, removeRecords, updateRecords } =
				this.$table.getRecordset()
			if (
				!insertRecords.length &&
				!removeRecords.length &&
				!updateRecords.length
			) {
				this.$message.warning('数据无变化')
			} else {
				// console.log(insertRecords, removeRecords, updateRecords)
				let arr = [insertRecords, updateRecords, removeRecords]
				arr.forEach((i, index) => {
					if (i.length > 0) {
						i.forEach(k => {
							k.menuType = 2
							k.parentUuid = this.parentMenu.meta.id
							k.parentUuids =
								this.parentMenu.meta.parentUuids + ',' + this.parentMenu.meta.id
							k.czlx = index
						})
					}
				})
				arr = arr.flat()
				arr.forEach((i, index) => {
					i.sort = index + 1
				})
				// console.log(arr)
				this.$emit('submit', arr)
			}
		},
	},
}
</script>
<style lang="scss" scoped></style>
